<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from './mixins/resize'

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      },
      pieArray: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        chart: null,
        legendArray:[]
      }
    },
    mounted() {
      // this.$nextTick(() => {
      //   this.initChart()
      // })
    },
    watch: {
      'pieArray': {
        deep: true,
        handler: function(newVal) {
          this.legendArray = newVal.map(item => item.name)
          this.initChart()
        }
      }
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.chart.setOption({
          backgroundColor: "#fff",
          title: {
            text: "近一周种类统计",
            subtext: "",
            x: "center",
            y: "center",
            textStyle: {
              fontWeight: "normal",
              color: "#3e4f6b",
              fontSize: 15,
            }
          },
          tooltip: {
            show: true,
            trigger: "item",
            formatter: "{b}: {c}份 ({d}%)",
          },
          legend: {
            orient: "horizontal",
            bottom: "1%",
            data: this.legendArray,
          },
          series: [{
              type: "pie",
              selectedMode: "single",
              radius: ["22%", "55%"],
              color: ["#86D560", "#AF89D6", "#59ADF3", "#FF999A", "#FFCC67"],
              label: {
                normal: {
                  position: "inner",
                  formatter: "{d}%",
                  textStyle: {
                    color: "#fff",
                    fontWeight: "bold",
                    fontSize: 14,
                  },
                },
              },
              labelLine: {
                normal: {
                  show: false,
                },
              },
              data: this.pieArray,
            },
            {
              type: "pie",
              radius: ["55%", "85%"],
              itemStyle: {
                normal: {
                  color: "#efeff6",
                },
                emphasis: {
                  color: "#ADADAD",
                },
              },
              label: {
                normal: {
                  position: "inner",
                  formatter: `{b}\n{c}份`,
                  textStyle: {
                    color: "#3e4f6b",
                    fontWeight: "bold",
                    fontSize: 14,
                  },
                },
              },
              data: this.pieArray
            }
          ]
        })
      }
    }
  }
</script>
